<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>统一地图平台API</title>
    <meta name="keywords" content="统一地图平台api">
    <meta name="description" content="统一地图平台api">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <link href="./../script/api.css" rel="stylesheet">
</head>

<body class="restdemo-page">
    <div class="page_wrapper">
        <div data-tpl="" class="content-sidebar has_right">
            <div class="content">
                <div class="crumbs">
                    您现在的位置：
                    <a>开发</a> &gt;
                    <a>地图JS API</a> &gt;
                    <a>图层加载</a></div>
                <article>
                    <h1 class="title">
                        图层加载
                        <span class="update-time">最后更新时间: 2020年04月30日</span>
                    </h1>
                    <div>
                        <div class="md-container">
                            <h2>添加数据源</h2>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
        let source = amap.addSource(id, param); // amap为地图对象 id为数据源ID param为 SourceParas实例化。返回 Source对象

                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <h2>添加图层</h2>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
        let Layer = amap.addLayer(id, source, param); // amap为地图对象 id为图层ID param为 LayerParas实例化对象。返回 Layer对象
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <h2>简单示例</h2>
                            <div class="md-demo-code-wrapper">
                                <div class="md-demo-code-header"><a class="active">JavaScript</a></div>
                                <div class="md-demo-code-content">
                                    <div class="md-demo-code-content-item active">
                                        <pre><code class="js hljs javascript">
            var Polygon = {
                'type': 'Feature',
                'geometry': {
                    'type': 'Polygon',
                    'coordinates': [
                        [
                            [113.222646, 23.201359],
                            [113.322646, 23.301359],
                            [113.422646, 23.501359],
                            [113.522646, 23.230359],
                            [113.222646, 23.201359]
                        ]
                    ]
                }
            }

            let source = amap.addSource("Polygon_GEOJSON", {
                "type": "geojson",
                "data": Polygon
            });


            let layer = amap.addLayer("PolygonLayer", "Polygon_GEOJSON", {
                'type': 'fill',
                'paint': {
                    'fill-color': '#ff0000',
                    'fill-opacity': 0.8
                }
            });
                                        </code></pre>
                                    </div>
                                </div>
                            </div>
                            <h2>SourceParas</h2>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>名称</p>
                                                </th>
                                                <th>
                                                    <p>类型</p>
                                                </th>
                                                <th>
                                                    <p>是否必须(true/false)</p>
                                                </th>
                                                <th>
                                                    <p>默认值</p>
                                                </th>
                                                <th>
                                                    <p>说明</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>type</p>
                                                </td>
                                                <td>
                                                    <p>string</p>
                                                </td>
                                                <td>
                                                    <p>true</p>
                                                </td>
                                                <td>
                                                    <p></p>
                                                </td>
                                                <td>
                                                    <p>数据源类型 'vector'-矢量,'raster'-栅格,'geojson'-geojson数据</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>tiles</p>
                                                </td>
                                                <td>
                                                    <p>string[]</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>一个或多个切片源URL (当数据源类型为vector或raster时,url和tiles需要指定其中一个的值)</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>url</p>
                                                </td>
                                                <td>
                                                    <p>string</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>单个的url地址 (当数据源类型为vector或raster时,url和tiles需要指定其中一个的值)</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>attribution</p>
                                                </td>
                                                <td>
                                                    <p>string</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>地图显示给用户时要显示的属性</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>data</p>
                                                </td>
                                                <td>
                                                    <p> string | Object</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>type类型为geojson时需要指定的值，一个地址或一个Geojson对象</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>bounds</p>
                                                </td>
                                                <td>
                                                    <p>[number, number, number, number]</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>指定数据源加载时的范围</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>scheme</p>
                                                </td>
                                                <td>
                                                    <p>'xyz' | 'tms'</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>'tms'</p>
                                                </td>
                                                <td>
                                                    <p>方案 当type为vector和raster时使用</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>tileSize</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>512</p>
                                                </td>
                                                <td>
                                                    <p>切片大小</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>maxzoom</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>22</p>
                                                </td>
                                                <td>
                                                    <p>可用最大级别</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>minzoom</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                    <p>0</p>
                                                </td>
                                                <td>
                                                    <p>可用最小级别</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>serverType</p>
                                                </td>
                                                <td>
                                                    <p>stirng</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>数据源服务引擎类型(加载Arcgis、Geoserver、Supermap地图服务时需要指定)
                                                    <p>Arcgis: '11'(WMS),'12'(WMTS),'13'(WFS),'14'(矢量切片)</p>
                                                    <p>Geoserver : '21'(WMS),'22'(WMTS),'23'(WFS),'24'(矢量切片)</p>
                                                    <p>Supermap : '31'(WMS),'32'(WMTS),'33'(WFS),'34'(矢量切片)</p>:
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>layerName</p>
                                                </td>
                                                <td>
                                                    <p>string</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>数据图层名(加载Arcgis、Geoserver、Supmap地图服务时需要指定)</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <h1>Source</h1>
                            <h2>方法</h2>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>方法</p>
                                                </th>
                                                <th>
                                                    <p>说明</p>
                                                </th>
                                                <th>
                                                    <p>参数</p>
                                                </th>
                                                <th>
                                                    <p>返回值</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getId</p>
                                                </td>
                                                <td>
                                                    <p>获取数据源ID</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>String</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getType</p>
                                                </td>
                                                <td>
                                                    <p>获取数据源类型，以mapbox的数据源类型为标准</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>String</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getUrl</p>
                                                </td>
                                                <td>
                                                    <p>数据源url地址</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>String</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setData</p>
                                                </td>
                                                <td>
                                                    <p>设置数据源。(数据源类型为geojson时此方法才有效)</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>string | Goejson对象</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <h2>LayerParas</h2>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>名称</p>
                                                </th>
                                                <th>
                                                    <p>类型</p>
                                                </th>
                                                <th>
                                                    <p>是否必须(true/false)</p>
                                                </th>
                                                <th>
                                                    <p>默认值</p>
                                                </th>
                                                <th>
                                                    <p>说明</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>type</p>
                                                </td>
                                                <td>
                                                    <p>string</p>
                                                </td>
                                                <td>
                                                    <p>true</p>
                                                </td>
                                                <td>
                                                    <p></p>
                                                </td>
                                                <td>
                                                    <p>图层类型 "background"、"fill", "line", "symbol", "circle", "raster",
                                                    </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>source-layer</p>
                                                </td>
                                                <td>
                                                    <p>string</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>数据源中图层名称</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>layout</p>
                                                </td>
                                                <td>
                                                    <p>Object</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>布局属性。参考Mapbox的layout属性</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>paint</p>
                                                </td>
                                                <td>
                                                    <p>Object</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>绘制属性。参考Mapbox的paint属性</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>filter</p>
                                                </td>
                                                <td>
                                                    <p>Object[]</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>过滤器数组对象。参考Mapbox的filter属性</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>maxzoom</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>图层最大显示级别</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>minzoom</p>
                                                </td>
                                                <td>
                                                    <p>number</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>图层最小显示级别</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>meadata</p>
                                                </td>
                                                <td>
                                                    <p>Object</p>
                                                </td>
                                                <td>
                                                    <p>false</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>其他自定义的数据属性</p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>

                            <h1>Layer</h1>
                            <h2>方法</h2>
                            <div class="md-atomic">
                                <div class="table-container" style="width:100%;">
                                    <table class="md-table">
                                        <tbody>
                                            <tr>
                                                <th>
                                                    <p>方法</p>
                                                </th>
                                                <th>
                                                    <p>说明</p>
                                                </th>
                                                <th>
                                                    <p>参数</p>
                                                </th>
                                                <th>
                                                    <p>返回值</p>
                                                </th>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getId</p>
                                                </td>
                                                <td>
                                                    <p>获取图层ID</p>
                                                </td>
                                                <td>
                                                </td>
                                                <td>
                                                    <p>String</p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setPaintProperty</p>
                                                </td>
                                                <td>
                                                    <p>更改绘制相关属性值 value值以</p>
                                                </td>
                                                <td>
                                                    <p>1. name:String 绘制属性名称</p>
                                                    <p>2. value:String 绘制属性值。以Mapbox的样式规范为标准</p>
                                                </td>
                                                <td>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setLayoutProperty</p>
                                                </td>
                                                <td>
                                                    <p>数据源url地址</p>
                                                </td>
                                                <td>
                                                    <p>1. name:String 布局属性名称</p>
                                                    <p>2. value:String 布局属性值。以Mapbox的样式规范为标准</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setFilter</p>
                                                </td>
                                                <td>
                                                    <p>设置过滤条件</p>
                                                </td>
                                                <td>
                                                    <p>1.filter:Array 以Mapbox的过滤器规范为准</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setVisible</p>
                                                </td>
                                                <td>
                                                    <p>设置图层是否可见</p>
                                                </td>
                                                <td>
                                                    <p>1.visible:boolean true表示显示，false表示隐藏</p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setGroup</p>
                                                </td>
                                                <td>
                                                    <p>设置图层分组名称</p>
                                                </td>
                                                <td>
                                                    <p>1.name:string </p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getGroup</p>
                                                </td>
                                                <td>
                                                    <p>获取图层分组名称</p>
                                                </td>
                                                <td>

                                                </td>
                                                <td>
                                                    <p>string </p>
                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>setIndex</p>
                                                </td>
                                                <td>
                                                    <p>设置图层索引</p>
                                                </td>
                                                <td>
                                                    <p>1.index:number </p>
                                                </td>
                                                <td>

                                                </td>
                                            </tr>
                                            <tr>
                                                <td>
                                                    <p>getIndex</p>
                                                </td>
                                                <td>
                                                    <p>获取图层索引</p>
                                                </td>
                                                <td>

                                                </td>
                                                <td>
                                                    <p>number </p>
                                                </td>
                                            </tr>
                                        </tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </article>
            </div>
        </div>
    </div>
</body>

</html>